<template>
	<view>
		<view class="nav-bar">
			<NavBar>
				<navigator open-type="navigateBack" hover-class="none" class="nav-back-view" slot="left">
					<image src="/static/nav-back-icon.png" class="nav-back"></image>
				</navigator>

				<view slot="center" class="nav-search">
					<image src="/static/search-icon.png" class="search-icon"></image>
					<input type="text" v-model="queryData.projectName" placeholder="请输入" class="input-css"
						placeholder-class="plac-css" confirm-type="search" @confirm="onSearchEvent" />
					<view v-if="queryData.projectName" class="column" @click="onClose">
						<image src="/static/search-cancel.png" class="search-cancel"></image>
					</view>
				</view>
				<view @click="onSearchEvent" class="nav-right-view" slot="right">搜索</view>
			</NavBar>
		</view>
		<block v-if="navTabBarActive == 1">
			<TransactionProject v-for="(item, index) in dataList" :key="index" :item="item"></TransactionProject>
			<Empty v-if="!dataList.length"></Empty>
		</block>
		<block v-else>
			<TransactionRecord v-for="(item, index) in recordList" :key="index" :item="item"></TransactionRecord>
			<Empty v-if="!recordList.length"></Empty>
		</block>
		<view style="height: 160upx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navTabBarActive: 1,
				dataList: [], // 项目列表
				recordList: [], // 交易记录列表
				queryData: {
					total: 0,
					pageNo: 1,
					pageSize: 15,
					projectName: '', // 项目名称
					preStatus: '', // 项目运转状态 10存续中 20已到期
					status: '', // 订单状态 10受理中 20交易成功 30交易失败
				}
			}
		},
		onLoad(options) {
			this.navTabBarActive = options.navTabBarActive || 1
			this.onSearchEvent()
		},
		onPullDownRefresh() {
			this.onSearchEvent()
		},
		onReachBottom() {
			if (this.queryData.total <= this.dataList.length) return
			this.queryData.pageNo += 1
			this.navTabBarActive == 1 ? this.getProjectMyPage() : this.getProjectRecordsPage()
		},
		methods: {
			onClose() {
				this.queryData.projectName = ''
				this.onSearchEvent()
			},
			onSearchEvent() {
				this.queryData.pageNo = 1
				this.navTabBarActive == 1 ? this.getProjectMyPage() : this.getProjectRecordsPage()
			},
			/**
			 * 我的项目列表
			 */
			async getProjectMyPage() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectMyPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.dataList = this.queryData.pageNo == 1 ? list : this.dataList.concat(list)
			},
			/**
			 * 交易记录列表
			 */
			async getProjectRecordsPage() {
				uni.$util.showLoading()
				const res = await uni.$api.getProjectRecordsPage(this.queryData).finally(uni.finally)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.recordList = this.queryData.pageNo == 1 ? list : this.recordList.concat(list)
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav-bar {
		position: sticky;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-back-view {
			@extend .column;

			.nav-back {
				width: 43upx;
				height: 43upx;
			}
		}

		.nav-right-view {
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding-left: 20upx;
		}

		.nav-search {
			width: 565rpx;
			height: 62rpx;
			background: #F8F4F1;
			border-radius: 38rpx;
			@extend .row-start;
			padding-left: 22upx;
			padding-right: 9upx;

			.search-icon {
				width: 29upx;
				height: 29upx;
				margin-right: 11upx;
			}

			.input-css {
				flex: 1;
				height: 100%;
				font-size: 25rpx;
				font-weight: 400;
			}

			.plac-css {
				font-size: 25rpx;
				font-weight: 400;
				color: #A48973;
			}

			.search-cancel {
				width: 45upx;
				height: 45upx;
			}
		}

	}
</style>